<template>
  <div class="height-full back-white pt5 pr10 pl10 pb40 directive-execute">
    <!-- <h3 class="f18 list-caption">稿件转发指令执行情况评估</h3> -->
    <h3 class="f18 list-caption">{{ directiveTitle }}执行情况评估</h3>

    <!-- 指令要素 -->
    <div class="d-flex flex-ju-sb mt20">
      <div style="width: 49%">
        <div class="title-line list-caption">指令要素</div>

        <div class="info-table f14 mt18">
          <div v-for="(factor, i) of directiveFactor" :key="i" class="info-table-row d-flex">
            <template v-for="(it, internal_i) of factor">
              <div :key="internal_i" class="it-item it-gray it-label bold">{{ it.label }}</div>
              <div :key="internal_i + 100" class="it-item it-value ellipsis pl10 pr10" :title="it.value">
                {{ it.value }}
              </div>
            </template>
          </div>
        </div>
      </div>

      <div style="width: 49%">
        <div class="title-line list-caption">推送要求</div>

        <div class="push-required mt18">
          <p class="f14">{{ content }}</p>
        </div>
      </div>
    </div>

    <!-- 指令概览 -->
    <div class="mt30 directive-overview">
      <div class="title-line list-caption">指令概览</div>

      <Table class="custom-ivu-table mt20" :columns="overview_columns" :data="overview_data"></Table>
    </div>

    <!-- 网站执行情况统计 -->
    <div class="mt30 website-execute">
      <div class="title-line list-caption">
        网站执行情况统计
        <IconButton
          :icon="visible.websiteExecute ? 'arrow-fold' : 'arrow-unfold'"
          :title="visible.websiteExecute ? '收起' : '展开'"
          :activated="false"
          style="vertical-align: bottom"
          width="14"
          class="ml5"
          @click.native="handleModuleToggle('websiteExecute')"
        ></IconButton>
      </div>

      <div ref="websiteExecute_ref" class="mt20">
        <Table class="custom-ivu-table" border :columns="websiteExecute_columns" :data="websiteExecute_data"></Table>
      </div>
    </div>

    <!-- 未执行情况 -->
    <div class="mt30 website-execute">
      <div class="title-line list-caption">
        未执行{{ unexecute_data.length || 0 }}家，情况如下
        <IconButton
          :icon="visible.unexecute ? 'arrow-fold' : 'arrow-unfold'"
          :title="visible.unexecute ? '收起' : '展开'"
          :activated="false"
          style="vertical-align: bottom"
          width="14"
          class="ml5"
          @click.native="handleModuleToggle('unexecute')"
        ></IconButton>
      </div>

      <div ref="unexecute_ref" class="mt20">
        <Table class="custom-ivu-table" border :columns="unexecute_columns" :data="unexecute_data"></Table>
      </div>
    </div>
  </div>
</template>

<script>
// service
import { createColumns_overview, createColumns_websiteExecute, createColumns_unexecute } from './service'

// utils
import { eleHightToggle } from '@/utils/dom.js'
import $bus from '@/utils/bus'

import mixin from './mixin'
export default {
  name: 'DirectiveExecuteStatus',

  mixins: [mixin],

  data() {
    return {
      visible: {
        websiteExecute: true,
        unexecute: true,
      },

      directiveInfo: {},

      directiveFactor: [],

      overview_columns: createColumns_overview(),
      overview_data: [],

      websiteExecute_columns: createColumns_websiteExecute(),
      websiteExecute_data: [],

      unexecute_columns: createColumns_unexecute(this),
      unexecute_data: [],
      unexecute_expand_columns: [],
    }
  },

  computed: {
    id() {
      let id = this.$route.query.id
      if (id) {
        window.sessionStorage.setItem('DirectiveExecuteStatusId', this.$route.query.id)
      } else {
        id = window.sessionStorage.getItem('DirectiveExecuteStatusId')
      }
      return id
    },

    content() {
      const factor = this.directiveInfo.summary
      if (!factor) return ''
      return factor.content || '-'
    },

    directiveTitle() {
      const factor = this.directiveInfo.summary
      if (!factor) return ''
      return (factor.type && factor.type.value) || ''
    },
  },

  methods: {
    handleModuleToggle(module) {
      const ref = this.$refs[module + '_ref']
      const ele = ref instanceof HTMLElement ? ref : this.$refs[module + '_ref'].$el
      if (!ele) return
      eleHightToggle(ele, this.visible[module])

      this.visible[module] = !this.visible[module]
    },

    handleSupervise({ list }) {
      // console.log(row)
      if (!list) return
      this.postCommandSupervise({ ids: list.map((it) => it.detailId).join() })
    },
  },

  mounted() {
    this.getCommandDetail(this.id)

    $bus.$on('on-get-command-detail', () => {
      // console.log('on-get-command-detail')
      this.getCommandDetail(this.id)
    })
  },
}
</script>

<style lang="less" scoped>
.directive-execute {
  color: var(--app-text-2);
}
.info-table {
  border-left: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
}
.info-table .it-item {
  text-align: center;
  height: 38px;
  line-height: 38px;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}
.info-table .it-gray {
  background-color: #fafafa;
}
.info-table .it-label {
  width: 23%;
}
.info-table .it-value {
  width: 27%;
}

.push-required {
  // height: 114px;
  height: calc(~'100% - 37px');
  padding: 12px;
  line-height: 22px;
  border: 1px solid #d1d1d1;
  overflow: auto;
}

.directive-overview {
  .custom-ivu-table {
    /deep/ .ivu-table-header .ivu-table-column-center {
      padding: 16px 0;
    }
  }
}

.website-execute {
  .custom-ivu-table.ivu-table-wrapper {
    border: 1px solid #dcdee2;
  }
  .custom-ivu-table {
    /deep/ .ivu-table-header .ivu-table-column-center {
      padding: 20px 0;
    }

    /deep/ td.ivu-table-expanded-cell {
      padding: 0;
      padding-bottom: 10px;
    }
  }
}
</style>
